<template>
  <div ref="boxwrap" class="wrap" :params="params">
    <div class="table-main">
      <div class="table-list">
        <!-- 使用 vxe-table -->
        <vxe-table
          ref="xTable"
          :loading="tableLoading"
          border
          :height="tableHeight"
          :print-config="tablePrint"
          :data="list"
          auto-resize
        >
          <vxe-column type="seq" width="60" />
          <vxe-column v-for="(item, index) in tableCol" :key="index" :field="item.prop" :title="item.label" :width="item.width || ''" />
        </vxe-table>
      </div>
      <div class="operate-btns">
        <el-button class="" type="primary" plain icon="el-icon-download" @click="downloadTable">导出</el-button>
        <el-button class="" type="primary" plain icon="el-icon-printer" @click="printTable">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { defaultAlertType } from '@/api/default-apis'
import { AlarmTypesThree } from '@/api/screen'
export default {
  name: 'LineStatusThird',
  props: {
    params: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      list: [],
      pageList: [],
      tableLoading: false,
      tableCol: [
        { label: '仪表名称', prop: 'devName' },
        { label: '异常时间', prop: 'alTime' },
        { label: '处理时间', prop: 'dealedTime' },
        { label: '异常内容', prop: 'alMessage' },
        { label: '异常类别', prop: 'alClassStr' }
      ],
      alClassObj: {},
      tableWidth: '100%',
      tableHeight: 'auto',
      pageObj: {
        page: 1, // 第几页
        limit: 20, // 每页条数
        total: 0 // 总条数
      },
      tablePrint: {
        // 自定义打印的样式
        style: `
                .vxe-table {
                  color: #000000; // 修改表格默认颜色
                  font-size: 12px; // 修改表格默认字体大小
                }
                .vxe-table,
                .vxe-table thead th,
                .vxe-table tbody td,
                .vxe-table tfoot td  {
                  border-color: #000000; // 修改表格边框颜色
                }
                .vxe-table thead th {
                  color: #000000; // 修改表头字体颜色
                  font-size: 14px; // 修改表头默认字体大小
                }
                .vxe-table tfoot td {
                  color: #000000; // 修改表尾字体颜色
                }
                `
      }
    }
  },
  watch: {
    params: {
      immediate: true,
      handler: function(newval, oldval) {
        this.params = newval
        this.getDatas()
      },
      deep: true
    }
  },
  mounted() {
    this.getTableHeight()
  },
  created() {
    this.getAlarmTypeStr()
  },
  methods: {
    getTableHeight() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.tableHeight = dom.clientHeight
        that.tableWidth = dom.clientWidth
      })
    },
    getAlarmTypeStr() {
      defaultAlertType().then(res => {
        this.alClassObj = res.type
      })
    },
    getDatas() {
      this.tableLoading = true
      AlarmTypesThree(this.params).then(res => {
        res.data.forEach(item => {
          item.alClassStr = this.alClassObj[item.alClass]
        })
        this.list = [].concat(res.data)
        this.pageObj.total = res.data.length
        this.getPage()
        this.tableLoading = false
      })
    },
    getPage() {
      this.pageList = this.list.filter((item, index) => {
        return index < this.pageObj.limit * this.pageObj.page && index >= this.pageObj.limit * (this.pageObj.page - 1)
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pageObj.page = currentPage
      this.pageObj.limit = pageSize
      this.getPage()
    },
    downloadTable() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // 表头str
        const tHeader = ['序号']
        // 表头字段
        const filterVal = ['index']
        this.tableCol.forEach(item => {
          tHeader.push(item.label)
          filterVal.push(item.prop)
        })
        const list = this.list // 未分页的全部数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '报警分类三阶报表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v, idx) => filterVal.map(j => {
        v.index = idx + 1
        return v[j]
      }))
    },
    printTable() {
      this.$refs.xTable.print({ data: this.list })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    height: 100%;
  }
  .table-main {
    width: 100%;
    height: 100%;
  }
</style>
